<!-- home -->
<template>
  <page-view :full="true">
    <top-bar title="转出"
             :white="true">
    </top-bar>
    <page-content>
      <div class="tr-container">
        <div class="bz-header">
          <img src="../../assets/image/mine/m_bgreen.png"
               alt=""
               class="tr-green">
          <p class="tr-zs">转出{{coinTitle}}</p>
        </div>
        <div class="bz-cbox">
          <div class="bz-p">
            <p class="bz-swjl">转出数量</p>
            <input :placeholder="coinNumber"
                   class="bz-input"
                   type="number"
                   v-model="coinCount">
          </div>
          <div class="bz-p">
            <p class="bz-swjl">转账地址</p>
            <input type="text"
                   placeholder="请输入转账地址"
                   class="bz-input"
                   v-model="account"
                   disabled>
          </div>

        </div>
        <div class="bz-world">
          <p class="bz-sure">转出前请务必确认地址及币种信息无误</p>
          <p>提示：
          <p>
          <p v-for="(item,index) in coinDetail.tips"
             :key="index">{{item}}</p>
        </div>
        <van-button round
                    type="info"
                    class="bz-btn"
                    @click="goOrder">确认转出</van-button>

      </div>
    </page-content>
  </page-view>
</template>

<script>
import Vue from 'vue';
import { Icon } from 'vant';
Vue.use(Icon);
import TopBar from '@/components/TopBar';
import PageView from '@/components/PageView';
import PageContent from '@/components/PageContent';
import service from '@/utils/request';
import { Dialog, Toast } from 'vant';
export default {
  components: {
    TopBar,
    PageView,
    PageContent
  },
  data () {
    return {
      coinType: null,
      coinTitle: null,
      coinNumber: null,
      coinDetail: {},
      account: '',
      coinCount: null,
      coinHave: null,
      coinMin: null
    }
  },
  created () {
    //获取币的类型
    this.coinType = this.$route.params.coinType
    //获取类型判断币种显示文字
    this.judgeType()
    //获取币种详情接口
    this.getList()

  },
  mounted () { },

  methods: {
    //获取类型判断币种显示文字
    judgeType () {
      if (this.coinType == '0') {
        this.coinTitle = 'BZZ'
      } else if (this.coinType == '1') {
        this.coinTitle = 'XCH'
      }
    },
    //接口获取
    getList () {
      return service.post('/apiGetWithdrawal.do', {
        currency: this.coinType
      }).then(res => {
        this.coinDetail = res.data
        //用户目前拥有的币的数量
        this.coinHave = this.coinDetail.havePrice
        this.coinNumber = '可提现金额' + this.coinHave + this.coinTitle
        // 最小提现金额
        this.coinMin = this.coinDetail.minPrice
        //判断地址是否为空 为空提示
        if (this.coinDetail.account_no == null) {
          Dialog.confirm({
            title: '提示',
            message: '请前往收/付款设置，设置转出地址',
            confirmButtonColor: '#585DF9',
            confirmButtonText: '立即前往'
          }).then(() => {
            this.$router.push({ path: '/pay' })
          }).catch(() => {
            this.$router.back()
          });
        } else {
          this.account = this.coinDetail.account_no
        }
      })
    },
    //确认转出
    goOrder () {
      if (this.coinCount == '' || this.coinCount == null || this.coinCount == undefined) {
        Dialog.alert({
          title: '提示',
          message: '请输入转出数量',
          confirmButtonColor: '#585DF9'
        })
      } else {
        if (this.coinCount > this.coinHave || this.coinCount < this.coinMin) {
          Dialog.alert({
            title: '提示',
            message: '请输入正确转出数量',
            confirmButtonColor: '#585DF9'
          })
        } else {
          return service.post('/apiWithdrawal.do', {
            currency: this.coinType,
            price: this.coinCount
          }).then(res => {
            console.log(res, 'apiWithdrawal')
            this.$router.back()
          })
        }
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.tr-container {
  width: 100vw;
  background: #fff;
  overflow: hidden;
  text-align: center;
  .bz-header {
    height: 203px;
    background: #585df9;
    overflow: hidden;
    .d-tit {
      width: 100%;
      text-align: center;
      position: relative;
      margin-top: 39px;
      // padding: 0 20px;
      .p-back {
        width: 22px;
        height: 22px;
        vertical-align: middle;
        position: absolute;
        left: 20px;
        top: 3px;
      }
      .p-center {
        width: auto;
        height: 28px;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 28px;
        margin: 0 auto;
        vertical-align: middle;
        display: inline-block;
      }
    }
    .tr-green {
      width: 61px;
      height: 61px;
      margin: 0 auto;
      margin-top: 75px;
      display: block;
    }
    .tr-zs {
      height: 22px;
      font-size: 16px;
      margin-top: 4px;
      font-weight: 500;
      color: #ffffff;
      line-height: 22px;
      text-align: center;
    }
    .tr-qh {
      height: 20px;
      font-size: 14px;
      font-weight: 400;
      color: #ffffff;
      line-height: 20px;
      margin-top: 10px;
      text-align: center;
      position: relative;
      span {
        display: inline-block;
        overflow: hidden;
        vertical-align: middle;
      }
      .tr-icon {
        position: absolute;
        top: 3px;
      }
    }
  }
  .bz-cbox {
    padding: 0 20px;
    .bz-p {
      position: relative;
      .bz-swjl {
        height: 22px;
        font-size: 16px;
        font-weight: 600;
        color: #3d3e54;
        line-height: 22px;
        margin: 13px 0;
        text-align: left;
      }
      .bz-input {
        height: 55px;
        line-height: 55px;
        background: #f2f1f8;
        border-radius: 8px;
        border: 1px solid #e2e0ee;
        width: 100%;
        padding-left: 22px;
        box-sizing: border-box;
        font-size: 16px;
        color: #ababab;
      }
      .tr-bsys {
        width: 21px;
        height: 21px;
        position: absolute;
        right: 16px;
        top: 52px;
      }
    }
  }
  .bz-world {
    padding: 0 20px 20px;
    font-size: 10px;
    font-weight: 400;
    color: #7a7886;
    margin-top: 18px;
    text-align: left;
    .bz-sure {
      margin-bottom: 14px;
    }
  }
  .bz-btn {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    width: 335px;
    height: 57px;
    line-height: 57px;
    background: #585df9;
    border-radius: 29px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #ffffff;
    margin: 0 auto;
    // display: flex;
    // align-items: center;
  }
}
</style>
